<!-- 策划工作安排 -->
<template>
  <div>
    <div
      class="pub-table-select-count"
      v-if="pageType === 'look'"
    >
      <a-icon
        type="info-circle"
        theme="twoTone"
      />
      <span style="margin-right: 12px">
        总数：<span class="totalNum">{{ form.totalVO.total }} 个</span>
        <a-divider type="vertical" />
        待签收 <span class="totalNum">{{ form.totalVO.notSign }} 个</span>
        <a-divider type="vertical" />
        待提交 <span class="totalNum">{{ form.totalVO.notSubmit }} 个</span>
        <a-divider type="vertical" />
        审核中 <span class="totalNum">{{ form.totalVO.inReview }} 个</span>
        <a-divider type="vertical" />
        审核不通过 <span class="totalNum">{{ form.totalVO.auditFailed }} 个</span>
        <a-divider type="vertical" />
        审核通过 <span class="totalNum">{{ form.totalVO.auditPass }} 个</span>
      </span>
    </div>
    <a-table
      bordered
      :data-source="dataSourceWork"
      :columns="columnsWork"
      :scroll="{ x: scrollx }"
      :pagination="false"
    >
      <span
        slot="serial"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
      <span
        slot="actualCompleteTime"
        slot-scope="text, record, index"
      >{{ record.actualCompleteTime ? record.actualCompleteTime : '--' }}</span>
      <span
        slot="signTime"
        slot-scope="text, record, index"
      >{{ record.signTime ? record.signTime : '--' }}</span>
      <!-- 状态 -->
      <span
        slot="status"
        slot-scope="text, record, index"
      >{{ handlerStatus(record) }}</span>
      <!-- 当前节点 -->
      <span
        slot="node"
        slot-scope="text, record"
      >{{ record | filterNode }}</span>
      <!-- 版本信息 -->
      <span
        slot="version"
        slot-scope="text, record, index"
      >
        <span v-if="record.version == 0">--</span>
        <a
          v-else
          @click="handleVersionRecord(record)"
        >V{{ record.version }}</a>
      </span>
      <!-- 完成期限 -->
      <span
        slot="deadline"
        slot-scope="text, record, index"
      >
        <span v-if="pageType === 'look'">{{ text }}</span>
        <EditableDate
          v-else
          :key="index + '-deadline'"
          :text="text"
          @change="onCellChange(record, 'deadline', $event)"
          :required="true"
        ></EditableDate>
      </span>
      <span
        slot="operation"
        slot-scope="text, record"
        v-if="!editModel"
      >
        <Opera
          :item="record"
         v-on="$listeners"
        ></Opera>
      </span>
      <!-- 操作人 -->
      <span
        slot="projectOperatorId"
        slot-scope="text, record, index"
      >
        <span v-if="pageType === 'look'">{{ record.projectOperatorName }}</span>
        <div
          v-else
          class="requiredFormItem"
        >
          <a-select
            :disabled="pageType === 'look'"
            v-model="record.projectOperatorId"
            allow-clear
            showSearch
            optionFilterProp="label"
            placeholder="请选择"
            option-label-prop="label"
            @change="(id) => changeEmployeeName(id, record)"
          >
            <a-icon
              v-if="fetching"
              style="color: #096dd9"
              slot="suffixIcon"
              type="loading"
            />
            <a-spin
              v-if="fetching"
              slot="notFoundContent"
              size="small"
            />
            <template v-else>
              <a-select-option
                v-for="item in memberList"
                :key="item.employeeId"
                :value="item.userId"
                :label="item.name"
              >
                <a-tooltip
                  placement="topLeft"
                  :mouseLeaveDelay="0"
                >
                  <template slot="title">
                    {{ item.jobNum }}
                  </template>
                  <div>{{ item.name }}({{ item.phone }})</div>
                </a-tooltip>
              </a-select-option>
            </template>
          </a-select>
        </div>
      </span>
    </a-table>
    <!-- 版本记录 -->
    <VersionRecord
      :visible.sync="versionVisible"
      :data="versionData"
    />
  </div>
</template>

<script>
import { planningWorkArrangementColumns, getGuid, planningWorkArrangementColumnsAdd } from '../../config'
import EditableDate from './EditableDate'
import Opera from './Opera'
import { getOrganizeUserListQuick } from '@/api/commons'
import VersionRecord from '../../../projectManagementPlanningSchedule/components/VersionRecord'
export default {
  name: 'PlanningWorkArrangement',
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    pageType: String,
    editModel: Boolean
  },
  watch: {
    'form.id': {
      handler(val) {
        if (val) {
          this.getImplees(this.form)
          this.dataSourceWork = this.form.workVOList
            .map((v) => {
              v.guid = getGuid()
              return v
            })
            .sort((a, b) => {
              return a.sort - b.sort
            })
        }
      },
      immediate: true
    },
    pageType: {
      handler(val) {
        if (val === 'look') {
          this.columnsWork = this.columnsWork.concat(planningWorkArrangementColumnsAdd)
        }
      },
      immediate: true
    }
  },
  filters: {
    filterNode({ status, currentNode }){
      if(Number(status) === 2){
        return currentNode
      }else{
        return '--'
      }
    }
  },
  data() {
    return {
      fetching: false,
      memberList: [], // 接收人
      columnsWork: [...planningWorkArrangementColumns],
      dataSourceWork: [],
      // 版本记录显示隐藏
      versionVisible: false,
      // 版本记录信息
      versionData: {}
    }
  },

  components: { EditableDate, Opera, VersionRecord },

  computed: {
    scrollx() {
      return this.pageType === 'look' ? 1950 : 1000
    }
  },

  created() {},

  mounted() {},

  methods: {
    // 查看版本信息
    handleVersionRecord(record) {
      this.versionVisible = true
      this.versionData = record
    },
    handlerStatus({ status }) {
      let name = ''
      switch (Number(status)) {
        case 0:
          name = '待签收'
          break
        case 1:
          name = '待提交'
          break
        case 2:
          name = '审核中'
          break
        case 3:
          name = '审核通过'
          break
        case 4:
          name = '审核不通过'
          break
      }
      return name
    },
    // 获取接收人
    getImplees() {
      this.fetching = true
      getOrganizeUserListQuick({ projectId: this.form.projectId }).then((res) => {
        const obj = {}
        // 去掉重复以及employeeId为空的数据
        res.data = res.data.reduce(function (item, next) {
          obj[next.employeeId] || !next.employeeId ? '' : (obj[next.employeeId] = true && item.push(next))
          return item
        }, [])
        this.memberList = res.data
        this.fetching = false
      })
    },
    // 获取接收人姓名
    changeEmployeeName(id, item) {
      // id && (this.form.recipientName = this.memberList.filter((v) => v.employeeId === id)[0].name)
      if (id) {
        const { name, userId } = this.memberList.filter((v) => v.userId === id)[0]
        const dataSource = this.$clone(this.dataSourceWork)
        const target = dataSource.find((el) => el.guid === item.guid)
        if (target) {
          target['projectOperatorId'] = userId
          target['projectOperatorName'] = name
          this.dataSourceWork = dataSource
        }
      }
    },
    onCellChange(item, dataIndex, value) {
      const dataSource = this.$clone(this.dataSourceWork)
      const target = dataSource.find((el) => el.guid === item.guid)
      if (target) {
        target[dataIndex] = value
        this.dataSourceWork = dataSource
      }
    }
  }
}
</script>
<style lang='less' scoped>
// /deep/ .ant-input {
//   border: none;
// }
</style>